<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>List Company</title>
</head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="js/jquery.dataTables.min.js"></script>
	<style type="text/css">
		body {
		    font-size: 14px;
		    font-family: Helvetica, Arial, sans-serif;
		    color: #666;
		}
		table{
		    font-size: 14px;
		    font-family: Helvetica, Arial, sans-serif;
		    color: #666;
		    border-spacing:0px;
		    text-align: center;
		    
		}
		tr td { border: 1px solid #ddd}
		tr.rowHeadeMaster{background-color: #dff0d8;}
		tr.rowHeaderDetail {background-color: #dff0d8;}
	</style>
<body>
<br/><br/>
	<div>
		<button type="button" class="btn btn-default navbar-btn" onclick="location.href='copyaddCompany.jsp'">Add new Company</button>
	</div>
	<table id="exampleTable" style="border: 1px solid #ddd">
		<thead>
			<tr class="rowHeadeMaster" >
				<th>Company name <img src="Images/sort_desc.png" style="width: 20px;"></th>
				<th>Address</th>
				<th>Contact person</th>
				<th></th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>

	<div style="display: none" >
		<table id="detailsTable">
			<thead>
				<tr class="rowHeaderDetail">
					<th>Product name</th>
					<th>Quality</th>
					<th>UnitPrice</th>					
				</tr>
			</thead>
			<tbody></tbody>
		</table>
	</div>
</body>
<script type="text/javascript">
function fnFormatDetails(table_id, html) {
    var sOut = "<table id=\"exampleTable_" + table_id + "\">";
    sOut += html;
    sOut += "</table>";
    return sOut;
}
var iTableCounter = 1;
    var oTable;
    var oInnerTable;
    var detailsTableHtml;
    var newRowData = [];
    //Run On HTML Build
    $(document).ready(function (){ 
        // you would probably be using templates here
    	$.ajax({
    		url : "ListCompanyController?action=1",
    		type : "GET",
    		datatype : 'json',
    		success : function(data) {
    			var data1 = JSON.parse(data);
    			var rowA;
    			for (var i = 0; i < data1.listCompany.length; i++) {
    				rowA ={companyId:data1.listCompany[i].companyId,companyName:data1.listCompany[i].companyName
    							,address:data1.listCompany[i].address,contactPerson:data1.listCompany[i].contactPerson
    							};
    				newRowData.push(rowA);
    				
    			}
    			loadData(newRowData);
    		},
    		error : function(data) {
    			alert("Don't reload!");
    		}
    	});   	
    });
    function loadData(newRowData) {
    	detailsTableHtml = $("#detailsTable").html();
        //Insert a 'details' column to the table
        var nCloneTh = document.createElement('th');
        var nCloneTd = document.createElement('td');
        nCloneTd.innerHTML = '<img src="http://i.imgur.com/SD7Dz.png">';
        nCloneTd.className = "center";

        $('#exampleTable thead tr').each(function () {
            this.insertBefore(nCloneTh, this.childNodes[0]);
        });

        $('#exampleTable tbody tr').each(function () {
            this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
        });
        
        //Initialse DataTables, with no sorting on the 'details' column
        var oTable = $('#exampleTable').dataTable({
            "bJQueryUI": true,
            "bFilter": true,
            "aaData": newRowData,
            "bPaginate": false, 
            "aoColumns": [
                {
                   "mDataProp": null,
                   "sClass": "control center",
                   "sDefaultContent": '<img src="Images/cong.jpg" style="width: 20px;">'
                },
                { "mDataProp": "companyName" },
                { "mDataProp": "address" },
                { "mDataProp": "contactPerson" },
                {  "sDefaultContent": '<input  class="btncontrol1" type="image" src="Images/edit.png"/> &nbsp <input class="btncontrol2" type="image" src="Images/detail.png"/>'},
                
            ], 
            "oLanguage": {
			    "sInfo": "_TOTAL_ entries"
			}, 
            "aaSorting": [[1, 'asc']]
        });

        /* Add event listener for opening and closing details
        * Note that the indicator for showing which row is open is not controlled by DataTables,
        * rather it is done here
        */
        $('.btncontrol2').on('click', function () {
        	var nTr = $(this).parents('tr')[0];
            var nTds = this;
        	var rowIndex = oTable.fnGetPosition( $(nTds).closest('tr')[0] ); 
            var companyId=  newRowData[rowIndex].companyId;
        	location.href='companyDetail.jsp?companyId='+companyId;
        });
        $('.btncontrol1').on('click', function () {
        	var nTr = $(this).parents('tr')[0];
            var nTds = this;
        	var rowIndex = oTable.fnGetPosition( $(nTds).closest('tr')[0] ); 
            var companyId=  newRowData[rowIndex].companyId;
        	location.href='edit.jsp?companyId='+companyId;
        });
        $('#exampleTable tbody td img').on('click', function () {
            var nTr = $(this).parents('tr')[0];
            var nTds = this;
            if (oTable.fnIsOpen(nTr)) {
                /* This row is already open - close it */
                this.src = "Images/cong.jpg";
                oTable.fnClose(nTr);
            }
            else {
                /* Open this row */
                 this.src = "Images/tru.jpg";
                var rowIndex = oTable.fnGetPosition( $(nTds).closest('tr')[0] ); 
                var companyId=  newRowData[rowIndex].companyId;
                var detailsRowData=[];                
                $.ajax({
            		url : "ListCompanyController?action=2&companyId="+companyId,
            		type : "GET",
            		datatype : 'json',
            		success : function(data) {
            			var data1 = JSON.parse(data);
            			var detail;
            			for (var i = 0; i < data1.listProduct.length; i++) {
            				detail ={productId:data1.listProduct[i].companyId,
            						productName:data1.listProduct[i].productName,
            						price:data1.listProduct[i].price,
            						quality:data1.listProduct[i].quality};
            				detailsRowData.push(detail);            				
            			}
            			loadDetail(detailsRowData);
            		},
            		error : function(data) {
            			alert("Don't reload!");
            		}
            	});  
	            // goi ajax theo companyId de lay list product
	            
	            function loadDetail(detailsRowData){               
                oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details');
                oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
                    "bJQueryUI": true,
                    "bFilter": false,
                    "aaData": detailsRowData,
                    "bSort" : false, // disables sorting
                    "aoColumns": [
	                { "mDataProp": "productName" },
	                { "mDataProp": "price" },
	                { "mDataProp": "quality" }
	            ] ,
                    "bPaginate": false ,
                    "oLanguage": {
						"sInfo": "_TOTAL_ entries"
			        } /* ,
                    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                      var imgLink = aData['pic']; 
                      var imgTag = '<img width="100px" src="' + imgLink + '"/>';
                      $('td:eq(0)', nRow).html(imgTag);  
                     return nRow;
                    } */
                });
                iTableCounter = iTableCounter + 1;
            }
          }
        }); 

	}
</script>
</html>
    